<template>
  <section class="todoapp">
    <!-- 子传父 接收添加事件 -->
    <todo-header :arr="list" @add="addFn"></todo-header>
    <!--  将list传入main组件  子传父 接收删除事件  -->
    <todo-main :arr="showArr" @del="delFn"></todo-main>
    <!-- 接收传递的状态  并把有筛选条件的数组 传递出去 -->
    <todo-footer :fArr="showArr" @changeType="typeFn" @clear='clearFn'></todo-footer>
  </section>
</template>


<script>
// 引入组件
import TodoFooter from './components/TodoFooter.vue'
import TodoHeader from './components/TodoHeader.vue'
import TodoMain from './components/TodoMain.vue'
// 引入样式
import './styles/base.css'
import './styles/index.css'

export default {
  components: {
    TodoHeader,
    TodoMain,
    TodoFooter
  },

  data() {
    return {
      // 先定义假数据
      // list: [
      //   { id: 100, name: '吃饭', isDone: true },
      //   { id: 201, name: '睡觉', isDone: false },
      //   { id: 103, name: '打豆豆', isDone: true }
      // ],

      list:JSON.parse(localStorage.getItem('todoList'))||[],

      getSel: 'all' //默认显示全部 一旦接收到数据 all会被覆盖
    }
  },
  methods: {
    // 子传父  添加任务事件
    addFn(taskName) {
      let id =
        this.list.length === 0 ? 100 : this.list[this.list.length - 1].id + 1
      this.list.push({
        id,
        name: taskName,
        isDone: false
      })
    },
    // 删除事件
    delFn(id) {
      let index = this.list.findIndex((p) => p.id === id) //
      this.list.splice(index, 1)
    },
    // 接收footer传递的isSel状态
    typeFn(str) {
      this.getSel = str
      // console.log(this.getSel);
    },
    // 清空已完成事件
    clearFn(){
      this.list = this.list.filter(p=>p.isDone === false)
    }
  },


  /* 
  这里的逻辑是 
  footer组件:  点击 全部 未完成 已完成 三个按钮 分别对应三个不同的状态 all no yes  把这个状态传到App组件
  app组件:  根据getsel这个状态不同的值 筛选出对应的数据 showArr  这里用computed计算属性来做  
  关键的地方是 把main和footer组件传过去的数据 用showArr代替list  从而达到根据不同状态显示不同数据的效果
  */

  computed: {
    // 定义showArr数组 里面都是list筛选得到的 TodoMain 和TodoFooter标签 要显示的数据要从list 改成showArr
    showArr() {
      if (this.getSel === 'yes') {
        // 已完成的  返回所有list中状态是已完成的
        return this.list.filter((p) => p.isDone)
      } else if (this.getSel === 'no') {
        return this.list.filter((p) => !p.isDone)
      } else {
        return this.list // 不是yes 也不是no  那么就是全数组
      }
    }
  },
  watch:{
    // 开启深度监听
    list: {
      deep:true,
      handler(){
        // 监听list的变化 只要list变化就保存到localStorage
        localStorage.setItem('todoList',JSON.stringify(this.list))
      }
    }
  }
}
</script>

<style>
</style>
